const mapboxGl = require('mapbox-gl/dist/mapbox-gl.js');

mapboxGl.accessToken = 'pk.eyJ1IjoibGl1d2VuanUiLCJhIjoiY2wwcm9saXJ4MDVqYjNjcWhpNXc3bTBhayJ9.PGUnMshnc7INeT_0K68OEQ';

let map

let bounds = [
    [102.756858, 30.082536], //赋值你想要的界限的西南坐标
    [105.493897, 31.439161] //赋值你想要的界限的东北坐标
]; //为bounds赋值，就是确定你想要的界限的范围

const UtilMapBox = {
    init (container = 'map-box') {
        map = new mapboxGl.Map({
            container,
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [-74.50, 40], // starting position [lng, lat]
            zoom: 9, // starting zoom,
            pitch: 45,
            bearing: -17.6,
            maxBounds: bounds,
        });

        // init0()

        return map
    }
}

export default UtilMapBox

function init0() {
    // Insert the layer beneath any symbol layer.
    var layers = map.getStyle().layers;

    var labelLayerId;
    for (var i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
            labelLayerId = layers[i].id;
            break;
        }
    }

    map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#aaa',

// use an 'interpolate' expression to add a smooth transition effect to the
// buildings as the user zooms in
            'fill-extrusion-height': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "height"]
            ],
            'fill-extrusion-base': [
                "interpolate", ["linear"], ["zoom"],
                15, 0,
                15.05, ["get", "min_height"]
            ],
            'fill-extrusion-opacity': .6
        }
    }, labelLayerId);
}